<template>
  <div style="width: 90%;margin: 30px auto;">
    <div>
      <el-select placeholder="请选择" v-model="redisValue" filterable clearable @change="changeRedisKey"
                 ref="selectRedisKey" style="margin: 0 20px;">
        <el-option v-for="(item, index) in redisKeyOptions" :key="index" :label="item.dictLabel"
                   :value="item.dictValue" :disabled="item.disabled"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="getRedisDetail">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="refreshRedisByKey">更新缓存</el-button>
    </div>
    <div
      style="width: 100%;margin: 30px 0;padding: 20px;border-radius: 10px;background-color: #e3e3e3; height: 70vh;overflow: scroll;">
      {{content}}
    </div>
  </div>
</template>

<script>
    import request from '@/utils/request'

    export default {
        name: "redisView",
        components: {},
        data() {
            return {
                redisKeyOptions: [],
                redisValue: "",
                redisLabel: "",
                content: "",
            }
        },
        watch: {},
        created() {
            this.getDictOption();
        },
        computed: {},
        methods: {
            refreshRedisByKey() {
                let that = this;
                if (that.redisLabel && that.redisValue) {

                } else {
                    that.$alert("查询条件错误,请重试");
                    return;
                }
                request({
                    url: '/apidata/refreshRedisByKey',
                    method: 'get',
                    params: {
                        'redisKey': that.redisLabel,
                        'redisType': that.redisValue
                    }
                }).then(response => {
                    that.content = response.msg;
                });
            },
            getRedisDetail() {
                let that = this;
                if (that.redisLabel && that.redisValue) {

                } else {
                    that.$alert("查询条件错误,请重试");
                    return;
                }
                request({
                    url: '/apidata/getRedisCacheInfo',
                    method: 'get',
                    params: {
                        'redisKey': that.redisLabel,
                        'redisType': that.redisValue
                    }
                }).then(response => {
                    that.content = response.msg;
                });
            },
            changeRedisKey(key) {
                this.redisValue = key;
                this.redisLabel = this.selectDictLabel(this.redisKeyOptions, key);
            },
            getDictOption: function () {
                this.getDictsBatch({
                    "redisKey": "redisKeyOptions"
                }, this, function (key, items) {

                });
            },
        },

    }
</script>

<style scoped>
  ::-webkit-scrollbar {
    width: 50px;
  }
</style>
